<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/echarts.min.js"></script>
  <script src="js/socket.io.js"></script>
</head>
<body style="padding-top: 30px;">

<div id="main" style="width: 100%; height:600px;"></div>

<div id="data"></div>


<script>
  let chart = echarts.init(document.getElementById('main'));

  let now = new Date().getTime();
  let chartMaxTime = now + 1000 * 60 * 5;

  let option = {
    title: {
      text: 'Serial Data'
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      // y: 'bottom',
      feature: {
        dataView: {},
        saveAsImage: {
          pixelRatio: 2
        }
      }
    },
    legend: {
      data: ['销量']
    },
    xAxis: {
      type: 'time',
      maxInterval: 1000 * 20,
      boundaryGap: false,
      max: chartMaxTime,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      max: 35,
      min: 15,
      interval: 0.5
    },
    series: [
      {
        name: '温度',
        type: 'line',
        data: [],
        smooth: true,
        symbol: 'none',
        markLine: {
          silent: true,
          data: [{
            yAxis: 28
          }]
        }
      },
      {
        name: '状态',
        type: 'line',
        data: [],
        symbol: 'none',
        lineStyle:{ width: 1}
      }
    ]
  };

  chart.setOption(option);

  let chartData1 = [];
  let chartData2 = [];
  let chartData3 = [];
  let chartData4 = [];

  let setpoint = 28;

  let socket = io();
  socket.on('data', function (data) {
    //console.log(data);
    let val = data.t;
    let time = new Date().getTime();
    if (time >= chartMaxTime){
      chartMaxTime += 1000*60*5;
    }

    document.getElementById("data").innerHTML = new Date() +  ' : ' + JSON.stringify(data);

    chartData1.push([time, val]);
    chartData2.push([time, data.s*16]);
  });
  socket.on('Setpoint', function (data) {
    //console.log(data);
    setpoint = data;
  });

  setInterval(()=>{
    chart.setOption({
      xAxis: {
        max: chartMaxTime,
      },
      series: [
        {
          data: chartData1,
          markLine: {
            silent: true,
            data: [{
              yAxis: setpoint
            }]
          }
        },
        {
          data: chartData2
        }
      ]
    })
  }, 600)

</script>
</body>
</html>
